<template>
	<div class="CPasswrod">
		<div>
			<img src="../assets/img/7519.png" alt="" @click="$router.go(-1)" />
			<span>提现密码</span>
			<div class="queren" @click="ssr">确认</div>
		</div>
		<div class="box">
			<input type="text" v-model="text" />
			<button @click="but">获取验证码</button>
			<p class="cxfs"><span class="shijian">60</span>S，后重新发送</p>
		</div>
		<div class="box">
			<input type="text" v-model="text1" placeholder="请输入验证码" @blur="sr" />
		</div>
		<div class="box box1">
			<p>提现密码</p>
			<div class="box3">
				<span>提现密码</span>
				<input type="password" v-model="pas" placeholder="请输入6位支付密码(数字+字母)"  />
			</div>
		</div>
		<div class="box box3">
			<span>确认密码</span>
			<input type="password" v-model="pas1" placeholder="再次输入6位支付密码(数字+字母)"  />
		</div>
		<p class="p">手机号不能为空</p>
		<p class="p1">手机号输入不正确</p>
		<p class="p2">验证码错误</p>
		<p class="p6">验证码不能为空</p>
		<p class="p3">密码不能为空</p>
		<p class="p4">密码格式错误</p>
		<p class="p5">两次密码不相同</p>
		<p class="p7">请输入手机号</p>
		<p class="p8" v-text="this.houfh"></p>
	</div>
</template>

<script>
	import local from "@/utils/local";

	import {SetTxPwd} from "@/api/all.js";
	export default {
		data() {
			return {
				text: "",
				text1: "",
				pas: "",
				pas1: "",
				flag: "false",
				zzbds: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/,
				shouj: /^[1]([3-9])[0-9]{9}$/,
				houfh: "",

			};
		},
		mounted() {},
		methods: {
			// 获取验证码的交互
			but() {
				if (this.text == "") {
					this.$notify({
						message: '请输入手机号',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});

				} else if (!this.shouj.test(this.text)) {
					this.$notify({
						message: '手机号不正确',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});
					
				} else {
					document.querySelector("button").style.display = "none";
					document.querySelector(".cxfs").style.display = "block";
					// 按钮交互
					let t = document.querySelector(".shijian");
					let sa = setInterval(function() {
						//计时器
						--t.innerHTML;
						if (t.innerHTML == 0) {
							document.querySelector("button").style = "display: block";
							document.querySelector(".cxfs").style = "display: none";
							clearInterval(sa); //关闭计时器
							t.innerHTML = 60;
						}
					}, 1000);
				}
			},

			ssr() {
				
				if (this.pas == "" || this.pas1 == "") {
					this.$notify({

						message: '请填写正确的密码',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});
					this.flag = false;
				} else if (!(this.zzbds.test(this.pas) || this.zzbds.test(this.pas1))) {
					this.$notify({
						message: '密码格式不正确',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});
				} else if (this.pas != this.pas1) {
					this.$notify({
						message: '密码不一致',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});
				} else {
					this.flag = true;
					let data ={
						Pwd: this.pas,
						ConfirmPwd: this.pas1,
						OldPwd: "",
						IsRetrievePwd: true,
						Phone: this.text,
						Code: this.text1,
						Type: 4,
					}
					SetTxPwd(data).then(res =>{
							let Data = res.data;
							this.houfh = Data;
							(this.text1 = ""),
							(this.pas1 = ""),
							(this.pas = ""),
							setTimeout(() => {
								document.querySelector(".p8").style = "display: none;";
							}, 3000);
							if (data.Code == 200) {
								this.$router.replace("/kabao");
							}
							console.log(Data);
						
					})
				
				}
			},
			
			// 验证码验证
			sr() {
				if (this.text1 == "") {
					this.$notify({
						message: '验证码不能为空',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});

				} else if (this.text1.length == 6) {
					document.querySelector(".p2").style.display = "none";
					this.flag = "true";
					console.log(this.flag);
				} else {
					this.$notify({
						message: '验证码错误',
						type: 'warning',
						position: 'top-left',
						duration: 1500
					});
				}
			},
		},
		created() {
			this.text = local.get("Code").LoginName;
		},
	};
</script>

<style lang="less" scoped>
	.p8 {
		text-align: center;
		color: #f04419;
		font-size: 0.9rem;
		margin-top: 4%;
	}

	.cxfs {
		display: none;
		font-size: 0.8rem;
		text-align: center;
	}

	// 文字垂直居中
	.cxfs::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.box3 {
		font-size: 0.9rem;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.box3>input {
		width: 80% !important;
	}

	.box1>p {
		font-size: 0.9rem;
		font-weight: 500;
		color: #374ef2;
	}

	.box1 {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: space-evenly;
		height: 11% !important;
	}

	.box {
		width: 95%;
		height: 7%;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
		align-items: center;
	}

	button,
	.cxfs {
		height: 80% !important;
		width: 30%;
		border-left: 1px solid #ccc !important;
	}

	input {
		width: 75%;
	}

	button,
	input,
	.cxfs {
		border: 0px;
		outline: none;
		background-color: #fff;
		height: 100%;
	}

	.p,
	.p1,
	.p2,
	.p3,
	.p4,
	.p5,
	.p6,
	.p7 {
		text-align: center;
		color: #f04419;
		font-size: 0.9rem;
		display: none;
		margin-top: 4%;
	}

	.CPasswrod>div:first-child>img {
		width: 0.9375rem;
		height: 0.9375rem;
	}

	.CPasswrod>div:first-child {
		width: 100%;
		height: 7%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 3%;
		padding-right: 4%;
		box-sizing: border-box;
		font-size: 1.1rem;
		font-weight: 500;
		color: #3a3a3a;
		border-bottom: 1px solid #e6e6e6;
	}

	.queren {
		font-size: 0.9rem;
		font-weight: 400;
		color: #374ef2;
	}

	.CPasswrod {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>
